<!--
 * @Author: your name
 * @Date: 2021-08-11 09:44:26
 * @LastEditTime: 2021-08-11 11:10:07
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \3-html&css\day08\03-float.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body>div>div{
            width:200px;
            height:200px;
            background-color: rgba(255,0,0,0.3);
        }
        /* .one>div  one下面的所有子节点 */
        .one>div{
            /* float 默认值为none 不脱离文档流 */
            /* float:none; */
            /* .one>div  one下面的所有子节点 都脱离了文档流 失去了父元素的支撑 导致结果：父元素高度为0 */
            float:left;
        }
        .three>div{
            background-color: rgba(0,255,0,0.3);
        }
        /* 前面两个兄弟元素浮动起来，后面的兄弟元素占据前面兄弟元素的位置
        第一个，第二个：非正常的文档流
        第三个：正常的文档流 */
        /* .three>div:nth-child(1),.three>div:nth-child(2){
            float:left;
        } */
        .three>div:nth-child(1),.three>div:nth-child(2){
            float:right;
        }
        .five>div{
            background-color: rgba(0,255,0,0.3);
        }
        .five>div:last-child{
            float:right;
            margin-right: 30px;
            
        }
    </style>
</head>
<body>
    脱离正常的文档流，脱离结点树
    和兄弟节点之间：浮动在后面的兄弟节点之上，后面兄弟占据它的原本位置
    作用：主要针对块级元素操作，使块级元素不仅可以自上而下也可以从左到右，一行多列布局
    浮动：
        float:left；  针对修饰的当前元素进行脱离
        margin-left;
        margin-top:/margin-bottom
        float:right;
        margin-right;
        margin-top:/margin-bottom
        
        <!--  error!不要这样搭配
             margin-left:
        left:
        top: -->
    <div class="one">
       <div>1</div>
       <div>2</div>
       <div>3</div>
    </div>
    <div class="two">
        <div>4</div>
        <div>5</div>
        <div>6</div>
</div>
<div class="three">
    <div>a</div>
    <div>b</div>
    <div></div>
</div>
    <div class="four">
     <div></div>
     <div></div>
     <div></div>
    </div>
    <div class="five">
        <div></div>
        <div></div>
        <div></div>
       </div>
       <div class="six">
        <div></div>
        <div></div>
        <div></div>
       </div>
</body>
</html>